﻿@page "/dialog/animation"

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons

@inherits SampleBaseComponent;

<SampleDescription>
    <p>
        This example demonstrates how to open or close the dialog with animation effects by clicking the appropriate button.
    </p>
</SampleDescription>
<ActionDescription>
   <p>
      The dialog can be opened or closed with animation effect using the DialogAnimationSettings tag.
      You can also customize the duration of animation and delay to begin animation.
      Disables the dialog's animation by setting the animation effect as none.    
    </p>
    <p>
        More information on the animation effect of Dialog can be found in the <a target="_blank" 
        href="https://blazor.syncfusion.com/documentation/dialog/animation/">
        documentation section</a>.
    </p>
</ActionDescription>
<div class="col-lg-12 control-section" id="target">
    <div id="customization">
        <div class="animate">
            <SfButton IsPrimary="true" CssClass="e-outline" Content="Zoom" OnClick="@(e => OnZoomBtnClick(DialogEffect.Zoom))"></SfButton>
        </div>
        <div class="animate">
            <SfButton IsPrimary="true" CssClass="e-outline" Content="FlipX Down" OnClick="@(e => OnZoomBtnClick(DialogEffect.FlipXDown))"></SfButton>
        </div>
        <div class="animate">
            <SfButton IsPrimary="true" CssClass="e-outline" Content="FlipX Up" OnClick="@(e => OnZoomBtnClick(DialogEffect.FlipXUp))"></SfButton>
        </div>
        <div class="animate">
            <SfButton IsPrimary="true" CssClass="e-outline" Content="FlipY Left" OnClick="@(e => OnZoomBtnClick(    DialogEffect.FlipYLeft))"></SfButton>
        </div>
        <div class="animate">
            <SfButton IsPrimary="true" CssClass="e-outline" Content="FlipY Right" OnClick="@(e => OnZoomBtnClick(DialogEffect.FlipYRight))"></SfButton>
        </div>
    </div>

    <SfDialog @ref="dialogObj" AllowDragging="true" @bind-Visible="@dialogVisible" IsModal="true" Width="285px" ShowCloseIcon="true" Target="#target">
        <DialogTemplates>
            <Header>
                Animation Dialog
            </Header>
            <Content>
               @content
            </Content>
        </DialogTemplates>
        <DialogButtons>
            <DialogButton Content="Hide" IsPrimary="true" OnClick="OnBtnCLick"></DialogButton>
        </DialogButtons>
        <DialogAnimationSettings Effect="@animationEffect"></DialogAnimationSettings>
    </SfDialog>
</div>

@code {

    SfDialog dialogObj;
    string content { get; set; } = "The dialog is configured with animation effect.It is opened or closed with 'Zoom In or Out' animation.";

    bool dialogVisible { get; set; } = true;
    DialogEffect animationEffect { get; set; } = DialogEffect.Zoom;

    private void OnBtnCLick()
    {
        this.dialogVisible = false;
    }


    private void OnZoomBtnClick(DialogEffect type)
    {
        string text;
        switch(type)
        {
            case DialogEffect.Zoom:
                text = "Zoom";
                break;
            case DialogEffect.FlipXDown:
                text = "FlipX Down";
                break;
            case DialogEffect.FlipXUp:
                text = "FlipX Up";
                break;
            case DialogEffect.FlipYLeft:
                text = "FlipX Left";
                break;
            default:
                text = "FlipX Right";
                break;
        }

        this.content = "The dialog is configured with animation effect. It is opened or closed with '" + text +"' animation.";
        this.animationEffect = type;
        this.dialogVisible = true;
    }

}

<style>
    html,
    body,
    #container {
        height: 100%;
        overflow: hidden;
        width: 100%;
        position: relative;
        min-height: 400px;
    }

    .text {
        text-transform: capitalize;
    }

#customization {
display: table;
margin: 0 auto;
    }

    .animate {
    display: table-cell;
        padding-left: 20px;
    }
</style>